<style>
    .vl {
        vertical-align: middle !important;
    }
</style>
<!--页面主要内容-->
<main class="lyear-layout-content">
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class=" callout-success callout" style="padding: 0;">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb" style="padding: 1.25rem 1rem;background-color: white;">
                            <li class="breadcrumb-item" aria-current="page">订单列表</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar d-flex flex-column flex-md-row">
                        <div class="toolbar-btn-action">
                            <a class="btn btn-danger dels" href="javascript:;"><i class="mdi mdi-window-close"></i>
                                删除</a>
                        </div>

                        <form class="search-bar ml-md-auto" method="get" action="{:url('/admin/order/search')}"
                            role="form">
                            <input type="hidden" name="search_field" id="search-field" value="nickname" />
                            <div class="input-group ml-md-auto">
                                <div class="input-group-prepend">
                                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false" id="search-btn">
                                        买家
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#!" data-field="nickname">买家</a>
                                        <a class="dropdown-item" href="#!" data-field="code">订单号</a>
                                        <a class="dropdown-item" href="#!" data-field="expid">配送公司</a>
                                        <a class="dropdown-item" href="#!" data-field="expcode">配送单号</a>
                                        <a class="dropdown-item" href="#!" data-field="status">订单状态</a>
                                    </div>
                                </div>
                                <input type="text" class="form-control" name="keyword" placeholder="请输入内容" />
                            </div>
                        </form>
                        <a href="{:url('admin/order/index')}" class="btn btn-info mb-2"
                            style="margin-left: 10px;">重置</a>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="check-all" />
                                                <label class="custom-control-label" for="check-all"></label>
                                            </div>
                                        </th>
                                        <th>编号</th>
                                        <th>订单总价</th>
                                        <th>买家</th>
                                        <th>收货地址</th>
                                        <th>订单号</th>
                                        <th>配送公司</th>
                                        <th>配送单号</th>
                                        <th>订单状态</th>
                                        <th>下单时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="tb">
                                    {foreach $orderList as $item}
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input ids" name="ids[]"
                                                    value="{$item.id}" id="ids-{$item.id}" />
                                                <label class="custom-control-label" for="ids-{$item.id}"></label>
                                            </div>
                                        </td>
                                        <td class="vl">{$item.id}</td>
                                        <td class="vl"><i class="mdi mdi-diamond-stone"></i> {$item.total}</td>
                                        <td class="vl">{$item.user.nickname}</td>
                                        <td class="vl">{$item.region_text}</td>
                                        <td class="vl">{$item.code}</td>
                                        <td class="vl"><span class="{$item.express_class}">{$item.express.name}</span>
                                        </td>
                                        <td class="vl">{$item.expcode}</td>
                                        <td class="vl" style="font-size: 18px">
                                            <span class="{$item.status_class}">{$item.status_text}</span>
                                        </td>
                                        <td class="vl">{$item.createtime_text}</td>
                                        <td class="vl">
                                            <div class="btn-group">
                                                <a id="open_model" type="button"
                                                    class="role-add btn btn-xs btn-default m-r-5" title=""
                                                    data-toggle="modal" data-target="#myModal_{$item.id}"
                                                    data-id='{$item.id}'><i class="mdi mdi-plus"></i></a>

                                                <a class="btn btn-xs btn-default"
                                                    href="{:url('admin/order/edit',['id' => $item['id']])}"
                                                    data-toggle="tooltip" data-original-title="编辑"><i
                                                        class="mdi mdi-pencil"></i></a>
                                                <a class='btn btn-xs btn-default del' data-original-title='删除'
                                                    href='javascript:;' data-toggle='tooltip' data-id='{$item.id}'
                                                    data-action="del"><i class='mdi mdi-window-close'></i></a>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- TODO 模态框 -->
                                    <div class="modal fade bd-example-modal-lg" id="myModal_{$item.id}" tabindex="-1"
                                        role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h6 class="modal-title" id="myLargeModalTitle">修改发货状态</h6>
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <form class="state_form" action="" method="">
                                                        <input type="hidden" value="{$item.id}" name="id">
                                                        <div class="form-group">
                                                            <label for="nickname">买家</label>
                                                            <input type="text" class="form-control" id="nickname"
                                                                value="{$item.user.nickname}" readonly name="nickname">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="code">订单号</label>
                                                            <input type="text" class="form-control" id="code"
                                                                value="{$item.code}" readonly name="code">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="address">收货地址</label>
                                                            <input type="text" class="form-control" id="address"
                                                                value="{$item.region_text}" readonly name="address">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="status">订单状态</label>
                                                            <select name="status" id="status"
                                                                class="form-control selectpicker status_{$item.id}"
                                                                data-style="btn-primary">
                                                                {foreach $status as $key => $val}
                                                                <option value="{$key}" {$item.status==$key ? 'selected'
                                                                    : '' }>{$val}
                                                                </option>
                                                                {/foreach}
                                                            </select>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-dismiss="modal">关闭</button>
                                                            <button type="submit" data-id="{$item.id}"
                                                                class="btn btn-primary model_submit">保存</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>

                        <div style="text-align: center">{$orderList->render()}</div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</main>


<!--End 页面主要内容-->

<script>
    $('.search-bar .dropdown-menu a').click(function () {
        var field = $(this).data('field') || '';
        $('#search-field').val(field);
        $('#search-btn').html($(this).text());
    });

    // 获取的id
    function GetId() {
        // 存放id的数组
        let list = []

        $('input[name="ids[]"]:checked').each(function () {
            // console.log(item);
            list.push($(this).val())
        })

        return list
    }

    let idArr = [];

    $(".del").on("click", function () {
        let orderid = $(this).data("id");

        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否删除此数据",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'red',
            icon: 'mdi mdi-alert-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/order/delete')}`,
                            data: {
                                action: 'del',
                                orderid,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                        delay: 1500,
                                        onClose: () => {
                                            location.reload();
                                        }
                                    });
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger'
                },
            },
        });
    });

    $('.dels').on('click', function () {
        idArr = GetId();
        if (idArr.length === 0) {
            $.notify({
                icon: 'mdi mdi-alert',
                message: '请选择您想要操作的数据',
            }, {
                type: "info",
            });
            return false;
        }

        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否删除选中商品",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'red',
            icon: 'mdi mdi-alert-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/order/delete')}`,
                            data: {
                                action: 'dels',
                                idArr,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger',
                },
            },
        });
        // console.log(idArr);
    })

    $(".model_submit").click(function (e) {
        e.preventDefault()
        let orderid = $(this).data('id');

        // TODO 获取当前模态框里的status值
        let tempClass = '.status_' + orderid;
        console.log($(`${tempClass} .selectpicker`).selectpicker('val'));

        let status = $(`${tempClass} .selectpicker`).selectpicker('val');

        let data = {
            id: orderid,
            status
        }
        
        $.ajax({
            type: "post",
            url: `{:url('admin/order/change_status')}`,
            data: data,
            dataType: "json",
            success: function (res) {
                if (res.code === 1) {
                    $(`#myModal_${orderid}`).modal('handleUpdate')

                    $.notify({
                        icon: 'mdi mdi-check',
                        message: res.msg,
                    }, {
                        type: "success",
                        delay: 1500,
                        z_index: 9999,
                        onClose: function () {
                            location.reload();
                        }
                    });
                } else {
                    $.notify({
                        icon: 'mdi mdi-window-close',
                        message: res.msg,
                    }, {
                        type: "danger",
                        z_index: 9999,
                        delay: 3000
                    });
                }
            }
        });
    })
</script>